<template>
  <div class="checkInfo">
    <div class="boardTitle">
      个人资料
    </div>
    <div class="infoBoard">
      <div class="info-piece">编号:#{{ user.id }}</div>
      <div class="info-piece">用户名:{{ user.username }}</div>
      <div class="info-piece">年龄:{{ user.age }}</div>
      <div class="info-piece">性别:{{ user.sex }}</div>
      <div class="info-piece">加入时间:{{ user.registerdate }}</div>
      <div class="note">个人签名:{{ user.note }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      user: this.$store.state.userinfo
    }
  }
}
</script>

<style scoped>
  .checkInfo {

  }
  .boardTitle {
    font-size: 32px;
    font-weight: bold;
    margin:5px 10px 5px;
    float: left;
  }
  .infoBoard {
    height: 250px;
    width: 75%;
    border: 1px gainsboro solid;
    border-radius: 20px;
    box-shadow: 0px 0px 10px gainsboro;
    float: left;
    margin: 0px 10px 40px;
  }
  .info-piece {
    width: 50%;
    font-size: 20px;
    font-weight: bold;
    line-height: 45px;
    padding-left: 10px;
    display: inline;
    float: left;
  }
  .note {
    color: cadetblue;
    width: 100%;
    padding-left: 10px;
    font-size: 20px;
    font-weight: bold;
    float: left;
  }
</style>
